<script  setup lang="ts">
import { ref, onMounted} from 'vue';
import { useNotification} from "naive-ui";
import { PAY_METHOD, TIME_SELECT, BILLING_STATUS} from '@/api/api';
import { Selector, Markdown} from '@/components/common'
import {payAttachFilter} from "@/api/entity/RequestParam";
import {getPageData} from "@/api/entity/ResultParam";
import { getBillingListAPI, isResultLogin} from '@/api';
import { getCastCurrentDate } from '@/utils/time/timeUtils';

const requestBillingParam = ref<payAttachFilter>({
  orderNo: '',
  status: null,
  channel: null,
  paymentEnv: '',
  count: 15,
  page: 0,
  sort: 0
})

const billingList = ref<getPageData>({
  pageList: [],
  currentPage: 0, pageCount: 0
})

const select_data = ref<number>(0);           // 第几行高亮
const isLoadPayAttach = ref<boolean>(false)   // 是否继续加载
const select_method = ref('0')
const select_time = ref('0')
const select_pay_status = ref('-1')

function loadMorePayAttachData(event) {
  const scrollTop = event.target.scrollTop + 1.6;
  if (scrollTop + event.target.clientHeight >= event.target.scrollHeight) {
    requestBillingParam.value.page = requestBillingParam.value.currentPage + 1
    if (requestBillingParam.value.page < billingList.value.pageCount) {
      getBillingList()
    }
  }
}


/**
 * 订单号
 */
function handlerBilling() {
    const initResultData =  { pageList: [], currentPage: 0, pageCount: 0};
    billingList.value = initResultData;
    requestBillingParam.value.page = 0;
    getBillingList();
}
/**
 *  支付渠道
 */
const handleSelectPaymentChange = (newValue:string) => {
  const initResultData =  { pageList: [], currentPage: 0, pageCount: 0};
  billingList.value = initResultData;
  if (newValue !== '0') {
    requestBillingParam.value.channel = newValue;
  } else {
    requestBillingParam.value.channel = null;
  }
  requestBillingParam.value.page = 0;
  getBillingList()
}

const handleSelectTimeChange = (newValue:string) => {


}

const handleSelectBillingStatus = (newValue:string) => {
  const initResultData =  { pageList: [], currentPage: 0, pageCount: 0};
  billingList.value = initResultData;
  if (newValue !== -1) {
    requestBillingParam.value.status = newValue;
  } else {
    requestBillingParam.value.channel = null;
  }
  requestBillingParam.value.page = 0;
  getBillingList()
}


function getBillingList() {
  if (!isLoadPayAttach.value) {
    isLoadPayAttach.value = true
    getBillingListAPI(requestBillingParam.value).then(res => {
      if (res.code === 200) {
        const resultData:getPageData = res.data
        if (Array.isArray(billingList.value.pageList) && Array.isArray(resultData.pageList)) {
          billingList.value.pageList = [...billingList.value.pageList, ...resultData.pageList];
        }
        billingList.value.pageCount = resultData.pageCount;
        billingList.value.currentPage = resultData.currentPage;
      }
      isLoadPayAttach.value = false
    }).catch(error => {
      isLoadPayAttach.value = false
    })
  }
}

// 组件挂载时，初始化高亮显示
onMounted(() => {
  getBillingList()
});



function getPaymentChannel(channel: number) {
  return PAY_METHOD[channel].text
}

function getBillingStatus(status: number) {
  return BILLING_STATUS[status + 1].text
}
</script>


<template>
  <div class="w-95 mt-10 mb-20">
    <div class="call-title w-40 mb-10 mx-auto fs-5">
      流水账单数据详情
    </div>

    <div class="row mx-auto">
      <div class="col-lg-4 mx-auto d-flex mt-3">
        <div class="col-7">
          <input
              v-model="requestBillingParam.orderNo"
              @keyup.enter="handlerBilling"
              class="input-material"
              placeholder="订单号"/>
        </div>
        <div class="col-6 pl-5">
          <Selector class="col-10"
                    :label="''"
                    @change="handleSelectBillingStatus"
                    :options="BILLING_STATUS"
                    :value="select_pay_status" />
        </div>
      </div>
      <div class="col-lg-7 d-flex mt-3">
        <Selector class="col-6"
                  :label="''"
                  @change="handleSelectPaymentChange"
                  :options="PAY_METHOD"
                  :value="select_method" />


        <Selector class="col-2 ml-6"
                  :label="''"
                  @change="handleSelectTimeChange"
                  :options="TIME_SELECT"
                  :value="select_time" />
      </div>
    </div>


    <div class="row w-100 mx-auto">
      <div class="datatable-table ml-3 col-lg-7 mx-auto mt-5" @scroll="loadMorePayAttachData">
        <table class="table text-sm" id="datatable1" style="width: 100%;">
          <thead>
          <tr>
            <th>订单号</th>
            <th>渠道 / 状态</th>
            <th>金额</th>
            <th>时间</th>
          </tr>
          </thead>
          <tbody>
          <tr class="tr-lable"
              v-for="(billing, index) in billingList.pageList"
              :key="index"
          >
            <td class="td_lable">{{billing.orderNo}}</td>
            <td class="td_lable">
              {{getPaymentChannel(billing.channel)}}
              /
              {{getBillingStatus(billing.status)}}
            </td>
            <td class="td_lable">
              {{billing.paymentAmount}}
            </td>
            <td class="td_lable">
              {{getCastCurrentDate(billing.endTime)}}
            </td>
          </tr>
          </tbody>
        </table>
      </div>


    </div>
  </div>
</template>


<style scoped>
.input-material {
  letter-spacing: 1px;
  border: none;
  outline: none;
  background: none;
  padding: .375rem 0;
  border-bottom: 1px solid #40444b;
  display: block;
  width: 100%;
}

.datatable-table {
  height: 40rem;
  overflow-y: auto;
  display: block;
}
.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 确保列宽一致 */
}
thead th {
  position: sticky; /* 启用粘性定位 */
  top: 0; /* 固定在顶部 */
  background-color: #fff; /* 确保thead在滚动时背景色不变 */
  z-index: 1; /* 确保thead在tbody上方 */
}
/* 滚动条整体样式 */
.datatable-table::-webkit-scrollbar {
  width: 10px; /* 滚动条的宽度 */
}
/* 滚动条滑块样式 */
.datatable-table::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3); /* 滑块颜色 */
  border-radius: 10px; /* 滑块边角 */
}

/* 滚动条滑块悬停样式 */
.datatable-table::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5); /* 滑块悬停时的颜色 */
  border-radius: 10px; /* 滑块边角 */
}
/* 滚动条轨道样式 */
.datatable-table::-webkit-scrollbar-track {
  background-color: #2F80ED; /* 轨道颜色 */
  border-radius: 10px; /* 轨道边角 */
}
.tr-lable:hover {
  color: red;
  cursor: pointer;
  transform: scale(0.99);
}
.td_lable {
  height: 6rem;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.td_lable:hover {
  text-overflow: inherit;
  white-space: inherit;
}

</style>

